<template>
    <div class="table">
        <!-- title -->
         <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="icon iconfont icon-jifen"></i>优惠券管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 表格主体 -->
        <div class="container">
            <!-- title -->
            <div class="handle-box"> 
                <p style="line-height:35px;">优惠券列表</p>
                <el-button class="right-btn" type="primary" @click="saveShare">设置分享状态</el-button>
                <el-button class="right-btn" type="primary" @click="cancelShare">取消分享状态</el-button>
            </div>
            <!-- 表格主体 -->
            <el-table ref="multipleTable"  tooltip-effect="dark" :data="tableData" border style="width: 100%"  @selection-change="handleSelectionChange">
                <el-table-column  type="selection" prop="checked" label="设置分享" width="80" align="center"></el-table-column>
                <el-table-column  prop="is_openText" label="是否设置已分享" width="120" align="center"></el-table-column>     
                <el-table-column  prop="name" label="优惠券名称"  align="center"></el-table-column>
                <el-table-column  prop="deduction_money" label="优惠券面额" width="120" align="center"></el-table-column>                
                <el-table-column  prop="condition_money" label="使用满减金额" width="120" align="center"></el-table-column>                
                           
                <el-table-column  prop="share_num" label="剩余(张)" width="120" align="center"></el-table-column>                
                <el-table-column  prop="shared_num" label="已领取(张)" width="120" align="center"></el-table-column>                
                <el-table-column  prop="expire_time" label="使用截止日期" width="200" align="center"></el-table-column> 
                <el-table-column label="操作"  align="center" width="160">
                    <template slot-scope="scope">
                        
                        <div v-if="!scope.row.hideEdit">
                            <el-button size="small" type="text" @click="handleLook(scope.$index, scope.row)" >编辑</el-button>
                            <el-button class="del" size="small" type="text" @click="handleDelete(scope.$index, scope.row)">下架</el-button>
                        </div>
                        <div v-else>
                            <el-button size="small" type="text" @click="handleLookHome(scope.$index, scope.row)" >编辑</el-button>
                        </div>
                    </template>
                </el-table-column>

            </el-table>
            <div style="height:200px;"></div>
            <!-- 分页按钮 -->
            <div class="pagination" v-show="totalPages>10">
                <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :total="totalPages">
                </el-pagination>
            </div>

            <!-- 下架提示框 -->
            <el-dialog title="提示" :visible.sync="delVisible" width="400px" center >
                <div class="del-dialog-cnt">下架不可恢复，是否确定下架？</div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="delVisible = false">取 消</el-button>
                    <el-button type="primary" @click="deleteRow">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>    
</template>
<script>
export default {
    name:"coupon" ,
    data(){
        return{
            id:'',//优惠券id
            isSave:false,//设置的分享是否保存  
            pageIndex:1,//当前页码
            pageSize:10,//每页10条
            totalPages:1,//默认的总条数
            delVisible:false,//下架提示框，默认隐藏
            tableData:[],//表格数据
            multipleSelection: [],//表格多选状态
        }
    },
    mounted(){
        
        this.$nextTick(function () {
            this. getListData();
            // console.log("nextTick");
           // console.log(this.$refs.multipleTable.toggleRowSelection()) // 获取el-dialog中的table
        })
        
       
    },
    methods:{
        //获取优惠券列表data数据
        getListData(){
            var _this = this;
            this.$axios
                .get('/manage/coupon/list', {
                    params: {
                        pageIndex:this.pageIndex,
                        pageSize:this.pageSize
                    }
                 })
                .then(response=>{
                    //console.log(response);
                    if(response.data.code==200){

                        this.totalPages = response.data.totalPages;
                        var data = response.data.data.currData;
                        //console.log(data);
                        // let obj =data;;
                        for(let i =0 ;i <data.length; i++){
    
                            if(data[i].is_open == 1){//设置了分享
                               if(data[i].id==1||data[i].id==2||data[i].id==3){
                                    data[i].is_openText = "首页优惠券不可分享";
                                    data[i].hideEdit = true; 
                               }else{
                                   data[i].is_openText = "是";
                                    data[i].hideEdit = false;
                               }
                                data[i].checked = true;
                                //this.$refs.multipleTable.toggleRowSelection(i,true);
                            }else{
                                if(data[i].id==1||data[i].id==2||data[i].id==3){
                                    data[i].is_openText = "首页优惠券不可分享";
                                    data[i].hideEdit = true; 
                               }else{
                                    data[i].is_openText = "否";
                                    data[i].hideEdit = false;
                               }
                                data[i].is_openText = "否";
                                data[i].checked = false;
                            }
                        }
                        // console.log(data);
                        this.tableData = data;//赋值 table 列表数据   
                    }else{
                        console.log(response.data.msg)  
                    }
                })
                .catch(error=>{
                    console.log(error); 
                });
        },
        //表格设置分享选中状态
        handleSelectionChange(val){
            this.multipleSelection = val;
                   
        },
        //保存分享状态
        saveShare(){

            if(this.multipleSelection == ''){
                this.$notify.info({title: '提示',message: '请先勾选需要设置的选项'});
                return false;
            }

            let _this = this;

            let ary = [];
            let array =[];
            for(let i =0 ;i <this.multipleSelection.length; i++){
                let obj = {};
                obj.id = this.multipleSelection[i].id;
                obj.is_open = 1;
                ary.push(obj);  
                array.push(this.multipleSelection[i].id);
            }
            this.multipleSelection = ary ;
            // console.log(ary);

            
            if(array.indexOf(1)>-1||array.indexOf(2)>-1||array.indexOf(3)>-1||array.indexOf("1")>-1||array.indexOf("2")>-1||array.indexOf("3")>-1){
                this.$notify.error({
                    title: '提示',
                    duration:2000,
                    message: '首页的优惠券不能作为分享劵分享'
                });
                
            }else{
                const querystring = require('querystring');
                const param ={
                    json:JSON.stringify(this.multipleSelection)
                }
                this.$axios.post('/manage/coupon/setShare',querystring.stringify(param)).then(response=>{
                    //console.log(response);
                    if(response.data.code==200){
                        this.$message.success('设置成功');
                        setTimeout(function(){
                            _this.getListData();//刷新数据
                        },1500);
                    }else{
                        this.$notify.error({
                            title: '设置失败',
                            duration:2000,
                            message: '失败原因：'+response.data.msg
                        });
                    }
                    
                }).catch(error=>{
                    console.log(error); 
                });
            }
            
        },
        //取消分享状态
        cancelShare(){

            if(this.multipleSelection == ''){
                    this.$notify.info({title: '提示',message: '请先勾选需要设置的选项'});
                    return false;
                }

            let _this = this;

            let ary = [];
            let array =[];
            for(let i =0 ;i <this.multipleSelection.length; i++){
                let obj = {};
                obj.id = this.multipleSelection[i].id;
                obj.is_open = 0;
                ary.push(obj);  
                array.push(this.multipleSelection[i].id);
            }
            this.multipleSelection = ary ;
            console.log(array)
            // console.log(array.indexOf(1));
            if(array.indexOf(1)>-1||array.indexOf(2)>-1||array.indexOf(3)>-1||array.indexOf("1")>-1||array.indexOf("2")>-1||array.indexOf("3")>-1){
                
                this.$notify.error({
                    title: '提示',
                    duration:2000,
                    message: '首页的优惠券不能作为分享劵分享'
                });
                
            }else{
                const querystring = require('querystring');
                const param ={
                    json:JSON.stringify(this.multipleSelection)
                }
                this.$axios.post('/manage/coupon/setShare',querystring.stringify(param)).then(response=>{
                    console.log(response);
                    if(response.data.code==200){
                        this.$message.success('取消成功');
                        setTimeout(function(){
                            _this.getListData();//刷新数据
                        },1500);
                    }else{
                        this.$notify.error({
                            title: '取消失败',
                            duration:2000,
                            message: '失败原因：'+response.data.msg
                        });
                    }
                }).catch(error=>{
                    console.log(error); 
                });
            }
        },
        //编辑优惠券
        handleLook(index,row){
            // this.subVisible = true;
            if(row.id &&row.id>0){
                //this.childId = row.id;
                this.$router.push({path:"/coupon/edit",query:{id:row.id}});
            }else{
                this.$message.error('获取用户ID失败:'+id);
            }
        },
        handleLookHome(index,row){
            //  this.subVisible = true;
            if(row.id &&row.id>0){
                //this.childId = row.id;
                //type值存在表示是首页的三张劵
                this.$router.push({path:"/coupon/edit",query:{id:row.id,type:1,shared_num:row.shared_num}});
            }else{
                this.$message.error('获取用户ID失败:'+id);
            }
        },
        //下架优惠券
        handleDelete (index,row){
            if(row.id && row.id>0){
                this.delVisible = true;
                this.delIndex = index;//当前要删除的下标
                this.delId = row.id;// 当前选中ID
                // console.log(this.delId);
            }
        },
        //执行下架优惠券
        deleteRow (){
            //console.log("触发了确定");
            if(this.delId>0){
                const querystring = require('querystring');
                const param ={
                    id:this.delId
                }
                this.$axios.post('/manage/coupon/delete',querystring.stringify(param)).then(response=>{
                    //console.log(response);
                    if(response.data.code==200){
                        this.tableData.splice(this.delIndex, 1);
                        this.$message.success('删除成功');
                        this.delVisible = false;
                    }else{
                        this.$notify.error({
                            title: '删除失败',
                            duration:2000,
                            message: '失败原因：'+response.data.msg
                        });
                    }
                    
                }).catch(error=>{
                    console.log(error); 
                });
            }
        },
         // 分页导航
        handleCurrentChange (val){
            // this.cur_page = val;
            //     this.getData();
        },
    }  
}
</script>
<style lang="stylus" scoped>
    .handle-box{
        height :75px;
        .handle-box-1{
            margin-bottom :15px;
            .handle-input {
                width: 250px;
                display: inline-block;
                margin-right :30px;
            }
            .handle-date{
                margin-right :30px;
            }
        }
        .handle-box-2{
            .handle-select{
                width :135px;
                margin-right :30px;
            }
        }
       
    }
    .edit{
        color #ff9800;
    }
    .del{
        color #e51c23;
    }
    .right-btn{
        float :right;
        margin-bottom  :20px;
        margin-left :20px;
    }
</style>
